<template>
  <div>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      width="660px"
      @close="dialogConfig.show = false"
    >
      <el-transfer
        v-model="formData.idList"
        :titles="['全部', '已选']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        :data="dataList"
        :props="{
          key: 'contactId',
          label: 'contactName',
        }"
        filterable
        :filter-method="search"
      >
        <template #default="{ option }">
          <div class="select-item">
            <div class="avatar">
              <Image :src="option.contactIcon" :width="30" />
            </div>
            <div class="nick-name">{{ option.contactName }}</div>
          </div>
        </template>
      </el-transfer>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

const dialogConfig = ref({
  show: false,
  title: "选择联系人",
  buttons: [
    {
      type: "primary",
      text: "确定",
      click: (e) => {
        submitData();
      },
    },
  ],
});

const search = (query, item) => {
  return item.contactName.toLowerCase().includes(query.toLowerCase());
};

const dataList = ref([]);
const formData = ref({
    idList: [],
});
const show = ({ contactList, clusterId, opType }) => {
  dialogConfig.value.title = opType == 0 ? "移除成员" : "添加成员";
  dialogConfig.value.show = true;
  dataList.value = contactList;
  formData.value = {
    idList: [],
    clusterId,
    opType,
  };
};
defineExpose({ show });

const emit = defineEmits(["callback"]);
const submitData = async () => {
  if (formData.value.idList.length == 0) {
    proxy.$message.warning("请选择联系人");
    return;
  }
  let params = {};
  Object.assign(params, formData.value);
  if (formData.value.opType === 0) {
    await proxy.Api.delClusterUser(params);
  } else {
    await proxy.Api.addClusterUser(params);
  }
  dialogConfig.value.show = false;
  emit("callback");
};
</script>

<style lang="scss" scoped>
.el-transfer {
  width: 100%;
  display: block !important;
  display: flex;
  :deep(.el-transfer-panel) {
    width: 260px;
  }
  :deep(.el-transfer-panel__item) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
  }
}
:deep(.el-transfer__buttons) {
  width: 60px;
  flex-direction: column;
  text-align: center;
  padding: 0px;
  .el-transfer__button {
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 5px;
    padding: 10px;
    height: 36px;
    border-radius: 50%;
  }
}

.el-drawer__body::-webkit-scrollbar {
  display: none;
}

.select-item {
  display: flex;
  .avatar {
    width: 30px;
    height: 30px;
  }
  .nick-name {
    flex: 1;
    margin-left: 5px;
  }
}
</style>
